@font-face {
    font-family: 'planerregular';
    src: url('planer_reg-webfont.eot');
    src: url('planer_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('planer_reg-webfont.woff') format('woff'),
         url('planer_reg-webfont.ttf') format('truetype'),
         url('planer_reg-webfont.svg#planerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body
{ background: url(../images/bg-page.png) no-repeat center top #081929; color: #fff; }
h3
{ font-family: 'planerregular'; }
a
{ color: #34ff00; }
	a:hover
	{ color: #fff; text-decoration: none; }
#header
{ border-bottom: 2px solid #fff; padding-bottom: 12px; margin-bottom: 12px; }
#logoRow
{ text-align: center; margin: 32px 0; }
.roundabout-holder 
{ list-style: none; padding: 0; margin: 0 auto; height: 400px; width: 80%; }
.roundabout-moveable-item 
{ height: 334px; cursor: pointer; }
.roundabout-in-focus 
{ cursor: auto; }
.createButton
{ background: rgba(0,0,0,0.4); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; display: block; padding: 18px; width: 400px; margin: 0 auto; font-family: 'planerregular'; color: #fff; font-size: 28px; text-transform: uppercase; }
	.createButton:hover
	{ background: rgba(0,0,0,0.8); text-decoration: none; color: #fff; }
#stage
{ margin-bottom: 24px; }
#stage ul
{ overflow: hidden; list-style: none; height: 33px; padding: 0; margin: 0; }
	#stage ul li
	{ float: left; background: url(../images/bg-stagebar.png) repeat-x center center; text-align: center; width: 6.8%; }
		#stage ul li a
		{ display: block; background: url(../images/bullet.png) no-repeat center center; width: 33px; height: 33px; margin: 0 auto; }
			#stage ul li a.active
			{ background: url(../images/bullet-active.png) no-repeat; }
		#stage ul li.barEndLeft
		{ background: url(../images/stagebar.png) no-repeat left center; width: 2%; height: 33px; }
		#stage ul li.barEndRight
		{ background: url(../images/stagebar.png) no-repeat right center; width: 2%; height: 33px; }
#views
{ background: url(../images/bg-views.png) repeat-x; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; overflow: hidden; list-style: none; padding: 14px; }
	#views li
	{ float: left; text-align: center; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: url(../images/bg-viewsingle.png); width: 21%;	height: 84px; line-height: 84px; margin: 0 2%; }
.toolWindow
{ background: rgba(0,0,0,0.4); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding: 1% 3% 3% 3%; margin-bottom: 24px; }
	.toolWindow p span
	{ font-weight: bold; font-size: 18px; display: block; margin-bottom: 12px; }
	.toolWindow p img
	{ margin-right: 12px; }
	.toolWindow h2
	{ text-transform: uppercase; color: #fff; font-family: 'planerregular'; font-size: 28px; text-align: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #fff; font-weight: normal; }
	.swatches
	{ overflow: hidden; list-style: none; margin: 0; padding: 0; }
		.swatches li
		{ float: left; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; height: 69px; width: 69px; margin: 9px; position: relative; }
			.swatches li a
			{ display: block; background: url(../images/gloss.png) center top; width: 69px; height: 69px; position: absolute; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
			.swatches li img.indicator
			{ position: absolute; left: -5px; bottom: -5px; z-index: 9; }
			.swatches li.colorWhite
			{ background: #fff; }
			.swatches li.colorBlack
			{ background: #000; }
			.swatches li.colorGray
			{ background: #666; }
			.swatches li.colorBlue
			{ background: #00245f; }
			.swatches li.colorSky
			{ background: #006fb7; }
			.swatches li.colorRed
			{ background: #ef2d2d; }
			.swatches li.colorPink
			{ background: #d16a95; }
			.swatches li.colorYellow
			{ background: #f0a20c; }